{extend name="public/common"}

{block name="style"}
<title>点对点教育VIP学员_录入确认</title>
<style>
	.header{
		background-color:#fff;
		margin-bottom:2.67vw;
		position: fixed;
		top:0;
		width:100vw;
		height:12vw;
		z-index: 999;

	}
	.header>li{
		width:50%;
		float:left;
		color:#333;
		line-height: 12.2vw;
		text-align: center;
		position:relative;
		font-size: 1.64rem;
	}
	.header>li>span{
		position:absolute;
		bottom:0;
		left:50%;
		-webkit-transform: translateX(-50%);
		height:.56vw;
		width:20vw;
		background-color:#df4934;
		display: none;
	}
	.header>li.active{
		color: #df4934;
	}
	.header>li.active>span{
		display:block;
	}
	.header>li:first-child:before {
		content: '';
		width: 0.27vw;
		height: 5.35vw;
		background-color: #e5e5e5;
		float: right;
		margin-top: 3.34vw;
	}
	.main{
		background-color:#fff;
		margin-top:12vw;
	}
	.main>ul>li{
		width:100%;
		padding:2.67vw 0;
		position:relative;
		background:url("__HOME__/images/sign/rightArr.png") no-repeat center right;
		background-size:7.5vw 7.5vw;
		border-bottom:0.27vw solid #eee;
		height: 25vw;
	}
	.main>ul>li p{
		width: 88vw;
		position:absolute;
		left: 5vw;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 1.46rem;
		color: #333333;
	}
	.name{
		color:#666;
		position:absolute;
		bottom: 8.67vw;;
		left:5vw;
		font-size:1.3rem;
	}
	.start{
		color:#666;
		position:absolute;
		bottom: 2.67vw;;
		left:5vw;
		font-size:1.3rem;
	}
	.end{
		color:#666;
		position:absolute;
		bottom: 2.67vw;;
		right:5vw;
		font-size:1.2rem;
	}
	.nomessage{
		text-align: center;
		position:fixed;
		top:50%;
		left:50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
	}
	.nomessage>img{
		width:56%;
		margin-bottom:4vw;
	}
	.nomessage>span{
		font-size: 1.7rem;
		color:#ccc;
	}
</style>
{/block}

{block name="body"}
<div class="scroll"  style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
<ul class="header clearfix">
	<li  data-id="1">
		未确认
		<span></span>
	</li>
	<li  data-id="2">
		已确认
		<span></span>
	</li>
</ul>
<div class="main" id="1" >
	<ul>
		{empty name="now"}
		<div class="nomessage">
			<img src="__HOME__/images/sign/5.png" alt="" ><br>
			<span>抱歉，暂无数据</span>
		</div>
		{else/}
		{volist name="now" id="vo"}
		<li data-num="{$vo.id}" onclick="window.location.href='detail?id={$vo.id}'; $(this).css('backgroundColor','#eee');" class="clearfix">
			<p>【姓名】：{$vo.name} 【VIP】：{$vo.vip}</p>
			<span class="name">【电话】：{$vo.tel}</span>
			<span class="start">【报名时间】：{$vo.time}</span>
		</li>
		{/volist}
		{/empty}
	</ul>
</div>
<div class="main hidden" id="2" >
	<ul>

		{empty name="go" }
		<div class="nomessage">
			<img src="__HOME__/images/sign/5.png" alt="" ><br>
			<span>抱歉，暂无数据</span>
		</div>
		{else/}
		{volist name="go" id="vo"}
		<li data-num="{$vo.id}" onclick="window.location.href='detail?id={$vo.id}'; $(this).css('backgroundColor','#eee');" class="clearfix" >
			<p {eq name="$vo.is_sign" value="1" }style="color: green"{/eq} >【姓名】：{$vo.name} 【VIP】：{$vo.vip}</p>
			<span class="name">【电话】：{$vo.tel}</span>
			<span class="start">【报名时间】：{$vo.time}</span>
		</li>
		{/volist}
		{/empty}
	</ul>
</div>
<div class="tip"></div>
<div class="loading hidden">
	<div class="typing_loader"></div>
</div>
	</div>
{/block}

{block name="script"}
<script src="__HOME__/js/reset.js"></script>
<script>
	$('title' ).text('点对点教育VIP学员_录入确认');
	//关闭分享
	function onBridgeReady() {
		WeixinJSBridge.call('hideOptionMenu');
	}
	if (typeof WeixinJSBridge == "undefined") {
		if (document.addEventListener) {
			document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		} else if (document.attachEvent) {
			document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
			document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		}
	} else {
		onBridgeReady();
	}
	$('#1').show();

	var scrollNow = true;//判断下拉请求是否执行中.false为正在请求
	var tabType = 1; // 记录当前是哪个tab
	$(function(){
		//初始化数据
		c = getCookie("c")?getCookie("c"):0;
		$(".header li").eq(c).addClass("active").siblings("li").removeClass("active");
		$(".main").eq(c).removeClass("hidden").siblings(".main").addClass("hidden");
		var len = $(".main").eq(c).find("li").length;
		if(len >=12){
			$('.tip').text('上拉加载更多');
			document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
		}else{
			document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
			$('.tip').hide();
		}
		//tab切换
		$(".header").on('click','li',function () {
			var index=$(this).index();
			$(this).addClass("active").siblings("li").removeClass("active");
			$(".main").eq(index).removeClass("hidden").siblings(".main").addClass("hidden");
			var len  =$(".main").eq(index).find("li").length;
			if(len >=12){
				$('.tip').text('上拉加载更多');
				document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
			}else{
				document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
				$('.tip').hide();
			}
			setCookie("c",index)
		});
	});
	var handleScroll = function() {
		c = getCookie("c")?getCookie("c"):0;
		var type = parseInt(c)+1;
		var tip = $(".tip");
		var loading = $('.loading');
		var len  = $(".main").eq(type-1).find("li").length;
		var el = document.getElementsByClassName("scroll")[0];
		if(el.scrollTop + el.offsetHeight +2 >= el.scrollHeight && scrollNow){
			scrollNow = false;
			tip.show().text('上拉加载更多');
			$.ajax({
				type: 'post',
				url: "{:Url('Write/more')}",
				data: {
					length:len,
					type:type
				},
				beforeSend: function(XMLHttpRequest){
					tip.hide();
					loading.toggleClass('hidden');
				},
				success: function (res) {
					loading.toggleClass('hidden');
					tip.show();
					if(res.code == 1){
						addNews(res,type);
						if(res.data.length==12){
							tip.text('上拉加载更多');
						}else{
							tip.text('没有更多了');
							document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
						}
					}else{
						tip.text('没有更多了');
						document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
					}
					scrollNow = true;
				},error:function(data){

				}
			});
		}
	};
	function addNews(data,type){
		var html = '';
		var lists = data.data;
		var len = lists.length;
		for(var i = 0; i< len;i++){
			var list = lists[i];
			html +=
					'<li data-num="'+list.id+'" onclick="window.locatio                                               n.href='+"'"+'detail?id='+list.id +"'; $(this).css('backgroundColor','#eee');"+'"class="clearfix" >'
			if (type == 2){
				if (list.is_sign == 1){
					html+='<p style="color: green" >【姓名】：'+list.name+' 【VIP】：'+list.vip+'</p>'
				}else{
					html+='<p>【姓名】：'+list.name+' 【VIP】：'+list.vip+'</p>'
				}
			}else{
				html+='<p>【姓名】：'+list.name+' 【VIP】：'+list.vip+'</p>'
			}
						html+='<span class="name" >【电话】：'+ list.tel +'</span>'+
						'<span class="start" >【报名时间】：'+list.time +'</span>'+
					'</li>'
		}
		$(".main").eq(type-1).find("ul").append(html);
	}


</script>
{/block}